<template>
  <a-modal :title="title" :after-close="reset" @ok="submit">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
      <a-form-item label="商品" name="productId">
        <a-select v-model:value="form.productId" filterable clearable @change="productSel">
          <a-select-option v-for="item in goods" :key="item.id" :value="item.id">
            {{ item.storeName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="用户名称：" name="nickname">
        <a-input v-model:value="form.nickname" />
      </a-form-item>
      <a-form-item label="评价文字：" name="comment">
        <a-input v-model:value="form.comment" placeholder="评价文字" />
      </a-form-item>
      <a-form-item label="商品分数：" name="productScore">
        <a-rate v-model:value="form.productScore" />
      </a-form-item>
      <a-form-item label="服务分数：" name="serviceScore">
        <a-rate v-model:value="form.serviceScore" />
      </a-form-item>
      <a-form-item label="评论图片" name="pics">
        <upload-img v-model="form.pics" :limit="6" placeholder="门店logo" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { storeproductreplyAddup, storeproductreplyinfo, productLstApi } from './api';
import { storeproductreply, type Istoreproductreply } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
  data: Partial<Istoreproductreply>
}>(), {
})
const title = computed(() => props.data.id ? '编辑' : '新增')
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new storeproductreply())
watchEffect(() => {
  if (props.data.id) {
    storeproductreplyinfo(props.data.id).then(res => {
      form.setProps(res)
    })
  }
})

const rules = {
  storeproductreplyName: [validReg('required', '请输入用户名')]
}

onMounted(() => {
  queryGoods()
})
let goods = $ref([{ id: '', storeName: '', attrValue: [{ suk: '' }] }])
async function queryGoods() {
  let { list } = await productLstApi({ type: '1' })
  goods = list
}
const emit = defineEmits(['change'])
function save() {
  let pics = JSON.stringify(form.pics)
  storeproductreplyAddup({ ...form, pics }).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}
function productSel(val: string) {
  if (val) {
    let temp = goods.filter(e => e.id == val)[0]
    form.sku = temp.attrValue[0].suk
  }
}
function reset() {
  form = new storeproductreply()
}
</script>

<style lang="less"></style>